import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Spin, Button, Divider } from 'antd';
import router from 'umi/router';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';

const { Description } = DescriptionList;
@connect(({ invoice, loading }) => ({
  invoice,
  loading: loading.models.invoice,
  invRuleCostDetail: invoice.invRuleCostDetail,
}))
@Form.create()
class ClientInfoDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const { location } = this.props;
    const { invRuleId } = queryString.parse(location.search);
    const { costId } = queryString.parse(location.search);
    // 获取成本中心详情数据
    this.fetchInvRuleCostDetail(invRuleId, costId);
  }

  // 获取成本中心详情数据
  fetchInvRuleCostDetail = (invRuleId, costId) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'invoice/getInvRuleCostDetail',
      payload: {
        invRuleId,
        costId,
      },
    });
  };

  render() {
    const { loading, invRuleCostDetail } = this.props;
    return (
      <PageHeaderWrapper>
        <Spin spinning={loading}>
          <Card title={<span style={{ fontWeight: 'bolder' }}>发票抬头</span>}>
            {invRuleCostDetail.invRulePanyTermMailDto &&
              invRuleCostDetail.invRulePanyTermMailDto.length &&
              invRuleCostDetail.invRulePanyTermMailDto.map((item, index) => (
                <div>
                  {
                    <DescriptionList style={{ marginBottom: 15 }}>
                      <Description term="成本中心">
                        {item.costName ? item.costName : '--'}
                      </Description>
                      <Description term="单张发票限额（元）">
                        {item.costQuota ? item.costQuota : '--'}
                      </Description>
                    </DescriptionList>
                  }
                  {index > 0 ? <Divider dashed /> : null}
                  {item.invCompany && (
                    <DescriptionList>
                      <Description term="单位名称">
                        {item.invCompany.holderName ? item.invCompany.holderName : '--'}
                      </Description>
                      <Description term="纳税人识别号">
                        {item.invCompany.taxerIdNo ? item.invCompany.taxerIdNo : '--'}
                      </Description>
                      <Description term="单位地址">
                        {item.invCompany.holderAddrs ? item.invCompany.holderAddrs : '--'}
                      </Description>
                      <Description term="电话">
                        {item.invCompany.phone ? item.invCompany.phone : '--'}
                      </Description>
                      <Description term="开户行">
                        {item.invCompany.bankOfDepoName ? item.invCompany.bankOfDepoName : '--'}
                      </Description>
                      <Description term="银行账号">
                        {item.invCompany.bankAcco ? item.invCompany.bankAcco : '--'}
                      </Description>
                    </DescriptionList>
                  )}
                </div>
              ))}
          </Card>
          {invRuleCostDetail.isHaveInvMail && invRuleCostDetail.isHaveInvMail === '1' && (
            <Card title={<span style={{ fontWeight: 'bolder' }}>发票交付信息</span>}>
              {invRuleCostDetail.invRulePanyTermMailDto &&
                invRuleCostDetail.invRulePanyTermMailDto.length &&
                invRuleCostDetail.invRulePanyTermMailDto.map(item => (
                  <div>
                    {// 发票邮寄
                    item.invMailList &&
                      item.invMailList.length &&
                      item.invMailList.map((values, index) => (
                        <div>
                          {index > 0 ? <Divider dashed /> : null}
                          <DescriptionList>
                            <Description term="发票类型">
                              {values.costInvTypeName ? values.costInvTypeName : '--'}
                            </Description>
                            <Description term="发票交付方式">
                              {values.invPayName ? values.invPayName : '--'}
                            </Description>
                            {values.invPay && values.invPay === 1 && (
                              <Description term="联系人姓名">
                                {values.contPerName ? values.contPerName : '--'}
                              </Description>
                            )}
                            {values.invPay && values.invPay === 1 && (
                              <Description term="联系人电话">
                                {values.contPerPhone ? values.contPerPhone : '--'}
                              </Description>
                            )}
                            {values.invPay && values.invPay === 1 && (
                              <Description term="邮寄地址">
                                {values.address ? values.address : '--'}
                              </Description>
                            )}
                            {/* {发票交付方式为邮件时，显示邮箱地址} */}
                            {values.invPay && values.invPay === 3 ? (
                              <Description term="邮箱地址">
                                {values.email ? values.email : '--'}
                              </Description>
                            ) : null}
                          </DescriptionList>
                        </div>
                      ))}
                  </div>
                ))}
            </Card>
          )}
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => router.goBack()}>返回</Button>
          </FooterToolbar>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}
export default ClientInfoDetails;
